<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title</title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- Kwicks Slider -->
  <link href="css/jquery.kwicks.css" rel="stylesheet">
  <!-- Main Style Sheet -->
  <link href="styles.css" rel="stylesheet">
  
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->      
    </head>
    <body>
      <!-- Logo and Header -->
      <div class="top-header">
        <div class="container">
          <div class="website-logo pull-left">
            <a href="#"><img src="img/logo.png"/></a>
          </div>
          <div class="main-menu pull-right">
            <div class="navbar-collapse collapse" align="center">
              <ul class="nav navbar-nav">              
                <li class="active"><a href="#">HOME</a></li>                
                <li><a href="#">BLOG</a></li>                
                <li><a href="#">GALLERY</a></li>                
                <li><a href="#">ABOUT</a></li>                
                <li><a href="#">CONTACT</a></li>             
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- End Top Header -->
      <!-- Menu Slider -->
      <div class="menu-slider">
        <div class="container">
          <!-- New Slider -->
          <div id='expand-controls'>
            <a href='#' data-index='0'>HOME</a>
            <a href='#' data-index='1'>BLOG</a>
            <a href='#' data-index='2'>GALLERY</a>
            <a href='#' data-index='3'>ABOUT</a>
            <a href='#' data-index='4'>CONTACT</a>
          </div>
          <ul class='kwicks kwicks-horizontal'>
            <li>
              <a href="#"><img src="img/img01.jpg" /></a>        
            </li>
            <li>
              <a href="#"><img src="img/img02.jpg" /></a>        
            </li>
            <li>
              <a href="#"><img src="img/img03.jpg" /></a>        
            </li>
            <li>
              <a href="#"><img src="img/img04.jpg" /></a>        
            </li>
            <li>
              <a href="#"><img src="img/img01.jpg" /></a>        
            </li>
          </ul>                  
        </div>
      </div>
      <div class="clearfix"></div>
      <!-- End Menu slider -->
      <!-- Home Content -->
      <div class="home-content">
        <div class="container">
          <div class="row">
            <div class="col-md-3">
              <div class="hotel-service">
                <h5>Lorem ipsum dolor sit amet</h5>
                <div class="hotel-service-content">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis porttitor massa eget pretium. Mauris vel erat sem, id tempor est. Pellentesque lobortis iaculis massa quis auctor.</p>
                </div>
              </div>
            </div>
            <div class="col-md-9">
              <div class="about-hotel">
                <h5>Lorem ipsum dolor sit amet</h5>
                <hr class="line1">
                <div class="about-us">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis porttitor massa eget pretium. Mauris vel erat sem, id tempor est. Pellentesque lobortis iaculis massa quis auctor.</p>
                  <br>

                </div>
              </div>
              <hr class="line1">
              <div class="special-offer">
                <h5>Lorem ipsum dolor sit amet</h5>
                <hr class="line1">
                <div class="row">
                  <div class="col-md-7">
                    <img src="img/img01.jpg" class="img-thumbnail">
                  </div>
                  <div class="special-offer-content col-md-5">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis porttitor massa eget pretium. Mauris vel erat sem, id tempor est. Pellentesque lobortis iaculis massa quis auctor.</p>
                  </div>
                </div>              
              </div>
              <hr class="line2">
            </div>
          </div>
        </div>
      </div>
      <!-- End Home content -->
      <!-- Travel Desk -->
      <div id="slider-image-gallery" class="carousel slide travel-desk" data-ride="carousel">      
        <div class="container">
          <h4 class="pull-left">Lorem ipsum dolor sit amet</h4>        
          <!-- Controls -->
          <div class="next-back pull-right">
            <a href="#slider-image-gallery" data-slide="prev">
              <span class="prev-travel-desk"></span>
            </a>
            <a href="#slider-image-gallery" data-slide="next">
              <span class="next-travel-desk"></span>
            </a>
            &nbsp;&nbsp;&nbsp;
          </div>
          <div class="clearfix"></div>
          <hr class="line1">
          <div class="carousel-inner">
            <div class="item active">
              <div class="row">
                <div class="col-md-3">
                  <a href="#"><img src="img/img01.jpg" class="img-thumbnail"></a>
                </div>
                <div class="col-md-3">
                  <a href="#"><img src="img/img02.jpg" class="img-thumbnail"></a>
                </div>
                <div class="col-md-3">
                  <a href="#"><img src="img/img03.jpg" class="img-thumbnail"></a>
                </div>
                <div class="col-md-3">
                  <a href="#"><img src="img/img04.jpg" class="img-thumbnail"></a>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="row">
                <div class="col-md-3">
                  <a href="#"><img src="img/img01.jpg" class="img-thumbnail"></a>
                </div>
                <div class="col-md-3">
                  <a href="#"><img src="img/img02.jpg" class="img-thumbnail"></a>
                </div>
                <div class="col-md-3">
                  <a href="#"><img src="img/img03.jpg" class="img-thumbnail"></a>
                </div>
                <div class="col-md-3">
                  <a href="#"><img src="img/img04.jpg" class="img-thumbnail"></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- End Travel Desk -->
      <!-- Footer -->
      <footer>
            <div class="main-menu-footer">
              <div class="container">
                <div class="navbar navbar-inverse navbar-static-top" role="navigation">
                  <div class="container">
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>              
                    </div>
                    <div class="navbar-collapse collapse" align="center">
                      <ul class="nav navbar-nav">              
                        <li class="active"><a href="#">HOME</a></li>                
                        <li><a href="#about">Blog</a></li>                
                        <li><a href="#about">GALLERY</a></li>                
                        <li><a href="#about">ABOUT</a></li>                
                        <li><a href="#about">CONTACT</a></li>             
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="footer-logo" align="center">
              <img src="img/logo.png">
            </div>
          </footer>
      <!-- End Footer -->
      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
      <script src="js/jquery.kwicks.js"></script>      
      <script type='text/javascript'>
      $(function() {
        var $container = $('.kwicks').kwicks({
          maxSize : 500,
          spacing : 0,
          behavior : "menu"
        });

        $('#expand-controls a').click(function(e) {
          e.preventDefault();
          var index = $(this).data('index');
          $container.kwicks('expand', index);
        });
      });
      </script>
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src="js/bootstrap.min.js"></script>  
    </body>
    </html>